<template>
  <div class="view-container">
    <div class="title-box animate__animated animate__fadeInDown">
      <div class="view-title">
        <h1 >用户中心数据</h1>
      </div>
      <div class="fakeData-switch">
        <label>启用假数据：</label>
        <el-switch v-model="flag" @change="handleSwitchChange"/>
      </div>
    </div>
    <div class="main-container animate__animated animate__lightSpeedInLeft">

      <!--   用户总体数据展示   -->
      <div class="user-data-box">
        <div class="data-box-title" style="background-color: #c4e6f8">
          <span style="padding-left: 10px">平台用户数据</span>
          <div class="my-divider" style="background-color: #27B3FF; "></div>
        </div>
        <div class="user-chart-box" style="width: 100%">
          <el-card>
            <div id="userType" style="width: 100%; height: 41vh;"></div>
          </el-card>
          <el-card>
            <div id="sexRatio" style="width: 100%; height: 41vh"></div>
          </el-card>
        </div>
      </div>

      <!--   学生数据展示   -->
      <div class="student-data-box" style="width: 100%; margin-top: 50px">
        <div class="data-box-title" style="  background-color: #f8dfd5;">
          <span style="padding-left: 10px">学生数据</span>
          <div class="my-divider" style="background-color: #f64e06; "></div>
        </div>
        <el-card class="student-chart-box1">
          <div class="education-div">
            <div id="education" class="education-chart-field" style="width: 100%;height: 15vh"></div>
            <div class="education-display-field">
              <el-icon size="30"><Coffee/></el-icon>
              <span>&nbsp&nbsp本科生</span>
              <span style="color: #5470C6">&nbsp{{educationData[0].value}}</span>
            </div>
            <div class="education-display-field">
              <el-icon size="30"><CoffeeCup/></el-icon>
              <span>&nbsp&nbsp硕士生</span>
              <span style="color: #91CC75">&nbsp{{educationData[1].value}}</span>
            </div>
            <div class="education-display-field">
              <el-icon size="30"><ColdDrink/></el-icon>
              <span>&nbsp&nbsp博士生</span>
              <span style="color: #FAC858">&nbsp{{educationData[2].value}}</span>
            </div>
          </div>
        </el-card>
        <div class="student-chart-box2">
          <el-card>
            <div id="nativePlace" style="width: 100%; height: 41vh;"></div>
          </el-card>
          <el-card>
            <div id="political" style="width: 100%; height: 41vh;"></div>
          </el-card>
        </div>
        <div class="student-chart-box2">
          <el-card>
            <div id="major" style="width: 100%; height: 75vh;"></div>
          </el-card>
          <el-card>
            <div id="college" style="width: 100%; height: 75vh;"></div>
          </el-card>
        </div>
      </div>

      <!--   新生总体数据展示   -->
      <div class="freshman-data-box" style="width: 100%; margin-top: 10vh">
        <div class="data-box-title" style="background-color: #d8fcd9">
          <span style="padding-left: 10px">新生用户数据</span>
          <div class="my-divider" style="background-color: #54cc70; "></div>
        </div>
        <div class="freshman-chart-box" style="width: 100%">
          <el-card>
            <div class="new-box" style="width: 100%; height: 30vh; color: #54cc70">
              <el-icon><ChatLineSquare /></el-icon>
              <h1>数据建设中</h1>
            </div>
          </el-card>
        </div>
      </div>

      <!--   辅导员总体数据展示   -->
      <div class="counselor-data-box" style="width: 100%; margin-top: 10vh">
        <div class="data-box-title" style="background-color: rgba(252,244,162,0.73)">
          <span style="padding-left: 10px">辅导员用户数据</span>
          <div class="my-divider" style="background-color: #efb905; "></div>
        </div>
        <div class="counselor-chart-box" style="width: 100%">
          <el-card>
            <div class="new-box" style="width: 100%; height: 30vh; color: #efb905">
              <el-icon><Mouse /></el-icon>
              <h1>数据建设中</h1>
            </div>
          </el-card>
        </div>
      </div>

      <!--   领导总体数据展示   -->
      <div class="leader-data-box" style="width: 100%; margin-top: 10vh">
        <div class="data-box-title" style="background-color: rgba(214,180,246,0.45)">
          <span style="padding-left: 10px">领导用户数据</span>
          <div class="my-divider" style="background-color: #9f0ee8; "></div>
        </div>
        <div class="leader-chart-box" style="width: 100%">
          <el-card>
            <div class="new-box" style="width: 100%; height: 30vh; color: #9f0ee8">
              <el-icon><Watch /></el-icon>
              <h1>数据建设中</h1>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  onBeforeUnmount,
  onMounted,
  reactive,
  ref
} from 'vue';
import {
  CoffeeCup,
  Coffee,
  ColdDrink,
  ChatLineSquare,
  Mouse,
  Watch
} from "@element-plus/icons-vue";
import * as echarts from "echarts";
import {getStudentsData, getUsersData} from "@/api/dataCenterApi/getData.js";
import {ElMessage} from "element-plus";

/*--------------变量定义开始---------------*/
const flag = ref(false)

  /****************绑定图表容器  开始*****************/
  //-----------用户平台数据--------------//
//平台用户类型占比
let userTypeChart
const userTypeData = ref([
  { value: 1048, name: '学生' },
  { value: 735, name: '新生' },
  { value: 580, name: '辅导员' },
  { value: 484, name: '领导' },
  { value: 300, name: '管理员' }
])
const userTypeOption = reactive({
  title: {
    text: '平台用户类型占比',
    subtext: '用户类型',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '角色数量',
      type: 'pie',
      radius: '60%',
      center:['52%','55%'],
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})

//平台用户男女比例
let sexRatioChart
const sexRatioData = ref([
    {
      value: 80,
      itemStyle: {
        color: '#159cd0'
      }
    },
    {  value: 100,
       itemStyle: {
         color: '#9f1515'
       }
    }
])
const sexRatioOption = reactive({
  title: {
    text: '平台用户男女比例',
    subtext: '男女比例',
    left: 'center'
  },
  xAxis: {
    type: 'category',
    data: ['男', '女']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'bar'
    }
  ]
})

  //-----------学生数据-------------//
//学历分布
let educationChart
const educationData = ref([
  { value: 580, name: '本科' },
  { value: 484, name: '硕士' },
  { value: 300, name: '博士' }
])
const educationOption = reactive({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '学历分布',
      type: 'pie',
      radius: ['60%', '100%'],
      center: ['50%', '95%'],
      // adjust the start and end angle
      startAngle: 180,
      endAngle: 360,
      data: []
    }
  ]
})

//学生籍贯统计图
let nativePlaceChart
const nativePlaceData = ref({
  placeList: ['广东','江西','新疆','广西','河南','湖南'],
  valueList: [18203, 23489, 29034, 104970, 131744, 630230]
})
const nativePlaceOption = reactive({
  title: {
    text: '学生生源地分布'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: []
  },
  series: [
    {
      type: 'bar',
      data: []
    },
  ]
})

//政治面貌分布
let politicalChart
const politicalData = ref([
  { value: 80, name: '共青团员' },
  { value: 60, name: '群众' },
  { value: 40, name: '党员' },
])
const politicalOption = reactive({
  backgroundColor: '#fff',
  title: {
    text: '政治面貌占比',
    left: 'center',
    top: 20,
    textStyle: {
      color: '#464646'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  visualMap: {
    show: false,
    min: 10,
    max: 150,
    inRange: {
      colorLightness: [0, 1]
    }
  },
  series: [
    {
      name: '政治面貌占比',
      type: 'pie',
      radius: '55%',
      center: ['50%', '50%'],
      data: [].sort(function (a, b) {
        return a.value - b.value;
      }),
      roseType: 'radius',
      label: {
        color: '#1E2431'
      },
      labelLine: {
        lineStyle: {
          color: '#1E2431'
        },
        smooth: 0.2,
        length: 30,
        length2: 30
      },
      itemStyle: {
        color: '#FF0700FF',
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      },
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return Math.random() * 200;
      }
    }
  ]
})

//专业分布
let majorChart
const majorData = ref([
  { value: 1048, name: '软件工程' },
  { value: 735, name: '通信工程' },
  { value: 580, name: '信息安全' },
  { value: 484, name: '机械工程' },
  { value: 300, name: '环境工程' },
  { value: 484, name: '土木工程' },
  { value: 300, name: '财务管理' }
])
const majorOption = reactive({
  tooltip: {
    trigger: 'item'
  },
  title: {
    text: '学生专业分布',
    subtext: '专业分布',
    left: 'center'
  },
  legend: {
    top: '2%',
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '专业分布',
      type: 'pie',
      radius: ['40%', '60%'],
      avoidLabelOverlap: false,
      center:['52%','54%'],
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: []
    }
  ]
})

//学院分布
let collegeChart
const collegeData = ref([
  { value: 40, name: '计算机科学与技术学院' },
  { value: 38, name: '电子工程学院' },
  { value: 32, name: '机械工程学院' },
  { value: 30, name: '土木工程学院' },
  { value: 28, name: '化学工程学院' },
  { value: 26, name: '环境科学与工程学院' },
  { value: 22, name: '经济与管理学院' },
  { value: 18, name: '人文社会科学学院' }
])
const collegeOption = reactive({
  title: {
    text: '学生学院分布',
    left: 'center'
  },
  legend: {
    top: 'bottom'
  },
  series: [
    {
      name: '学生学院分布',
      type: 'pie',
      radius: ['30%', '70%'],
      center: ['50%', '45%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: []
    }
  ]
})

   /****************绑定图表容器  结束*****************/
/*--------------变量定义结束---------------*/


/*---------------钩子开始-----------------*/
onMounted(() => {
  /*******获取数据******/
  getRealData()
})
onBeforeUnmount(() => {
  userTypeChart.dispose()
  sexRatioChart.dispose()
  educationChart.dispose()
  nativePlaceChart.dispose()
  politicalChart.dispose()
  collegeChart.dispose()
})
/*---------------钩子结束-----------------*/


/*--------------定义函数开始---------------*/
//数据模式选择
const handleSwitchChange = () => {
  if(flag.value){
    useFakeData()
  }
  else{
    getRealData()
  }
}

//处理平台用户请求数据
const initUserDataView = (res) =>{
  userTypeData.value = res.data.rolePro
  sexRatioData.value[0].value = res.data.sexPro.man
  sexRatioData.value[1].value = res.data.sexPro.woman
}

//处理学生用户请求数据
const initStudentDataView = (res) => {
  educationData.value = res.data.educationData
  nativePlaceData.value = res.data.nationalityData
  // politicalData.value = res.data.politicalData
  majorData.value = res.data.majorData
  collegeData.value = res.data.collegeData
}

//请求真数据
const getRealData = () => {
  //请求平台用户数据分析
  getUsersData().then((res) => {
    if(res.status === 200){
      initUserDataView(res)
    }
  }).then(() => {
    /*******用户平台数据展示******/
    //平台用户类型占比
    userTypeChart = echarts.init(document.getElementById("userType"))
    userTypeOption.series[0].data = userTypeData
    userTypeChart.setOption(userTypeOption)

    //平台男女比例
    sexRatioChart = echarts.init(document.getElementById("sexRatio"))
    sexRatioOption.series[0].data = sexRatioData
    sexRatioChart.setOption(sexRatioOption)
  }).catch(() => {
    ElMessage("数据获取失败")
  })

  //请求学生用户数据分析
  getStudentsData().then((res) => {
    if(res.status === 200){
      initStudentDataView(res)
    }
  }).then(() => {
    //学生机构统计
    nativePlaceChart = echarts.init(document.getElementById("nativePlace"))
    nativePlaceOption.yAxis.data = nativePlaceData.value.placeList
    nativePlaceOption.series[0].data = nativePlaceData.value.valueList
    nativePlaceChart.setOption(nativePlaceOption)

    //学历分布
    educationChart = echarts.init(document.getElementById("education"))
    educationOption.series[0].data = educationData
    educationChart.setOption(educationOption)

    //政治面貌分布
    politicalChart = echarts.init(document.getElementById("political"))
    politicalOption.series[0].data =politicalData
    politicalChart.setOption(politicalOption)

    //专业分布
    majorChart = echarts.init(document.getElementById("major"))
    majorOption.series[0].data = majorData
    majorChart.setOption(majorOption)

    //学院分布
    collegeChart = echarts.init(document.getElementById("college"))
    collegeOption.series[0].data = collegeData
    collegeChart.setOption(collegeOption)
  }).catch(() => {
    ElMessage("数据获取失败")
  })
}

//使用假数据
const useFakeData = () => {
  userTypeOption.series[0].data = [
    { value: 1048, name: '学生' },
    { value: 735, name: '新生' },
    { value: 580, name: '辅导员' },
    { value: 484, name: '领导' },
    { value: 300, name: '管理员' }
  ]
  sexRatioOption.series[0].data = [
    {
      value: 80,
      itemStyle: {
        color: '#159cd0'
      }
    },
    {  value: 100,
      itemStyle: {
        color: '#9f1515'
      }
    }
  ]
  nativePlaceOption.yAxis.data = ['广东','江西','新疆','广西','河南','湖南']
  nativePlaceOption.series[0].data = [18203, 23489, 29034, 104970, 131744, 630230]
  educationData.value = [
    { value: 580, name: '本科' },
    { value: 484, name: '硕士' },
    { value: 300, name: '博士' }
  ]
  educationOption.series[0].data = educationData
  politicalOption.series[0].data =[
    { value: 80, name: '共青团员' },
    { value: 60, name: '群众' },
    { value: 40, name: '党员' },
  ]
  majorOption.series[0].data = [
    { value: 1048, name: '软件工程' },
    { value: 735, name: '通信工程' },
    { value: 580, name: '信息安全' },
    { value: 484, name: '机械工程' },
    { value: 300, name: '环境工程' },
    { value: 484, name: '土木工程' },
    { value: 300, name: '财务管理' }
  ]
  collegeOption.series[0].data = [
    { value: 40, name: '计算机科学与技术学院' },
    { value: 38, name: '电子工程学院' },
    { value: 32, name: '机械工程学院' },
    { value: 30, name: '土木工程学院' },
    { value: 28, name: '化学工程学院' },
    { value: 26, name: '环境科学与工程学院' },
    { value: 22, name: '经济与管理学院' },
    { value: 18, name: '人文社会科学学院' }
  ]

  userTypeChart.setOption(userTypeOption,true)
  sexRatioChart.setOption(sexRatioOption)
  nativePlaceChart.setOption(nativePlaceOption)
  educationChart.setOption(educationOption)
  politicalChart.setOption(politicalOption)
  majorChart.setOption(majorOption)
  collegeChart.setOption(collegeOption)
}
/*--------------定义函数结束---------------*/
</script>

<style scoped>
.view-container{
  padding-top: 20px;
  width: 90%;
  overflow: hidden;
}
.title-box{
  animation-duration: 0.5s;
  overflow: hidden;
}
.view-title{
  font-size: 40px;
  font-weight: bolder;
  margin-bottom: 30px;
  float: left;
}
.fakeData-switch{
  float: right;
  margin: 10px;
}
.main-container{
  width: 100%;
  height: 370vh;
}
.my-divider{
  width: 100%;
  height: 4px;
  border-radius: 2px;
  margin-top: 5px;
  margin-bottom: 10px;
}
.data-box-title{
  font-size: 20px;
  font-weight: bold;
  border-radius: 5px;
}
.user-chart-box{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2%;
}
.student-chart-box1{
  width: 100%;
  margin-bottom: 10px;
}
.education-div{
  display: grid;
  grid-template-columns: 3fr 2fr 2fr 2fr;
  column-gap: 1%;
}
.education-display-field{
  height: 15vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
}
.student-chart-box2{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2%;
  margin-bottom: 15px;
}
.freshman-chart-box{
  width: 100%;
  margin-bottom: 15px;
}
.new-box{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 4px;
  transition: 0.2s all linear;
}
.new-box:hover{
  font-size: 50px;
  font-weight: bolder;
  letter-spacing: 10px;
}

</style>
